<template>
  <view class="box">
    <view class="use-bg">
      <!-- 名称 -->
      <view class="use-top" @click="ge()">
        <image src="/static/头像.png" alt=""></image>
        <view class="use-top1">
          阳光彩虹小白马
          <view class="sue-top1-1">
            18353987462
          </view>
        </view>
      </view>
      <!-- 收藏 -->
      <view class="use-two">
        <view class="use-two1">
          <image src="/static/收藏.png" alt="" @click="collect()"></image>
        </view>
        <view class="use-two2" @click="gz">
          <image src="/static/关注.png" alt=""></image>
        </view>
      </view>
      <!-- 余额 -->
      <view class="use-three">
        <view class="use-three1">
          <view class="use-three1-1" @click="balan()">
            <view class="use-three1-11">
              <image src="/static/钱包.png" alt=""></image>
            </view>
            <view class="use-three1-12">
              余额
            </view>
          </view>
          <view class="use-three1-2">
            1358.00
          </view>
        </view>
        <view class="use-three2" @click="hb()">
          <view class="use-three2-1">
            <view class="use-three2-11">
              <image src="/static/红包.png" alt=""></image>
            </view>
            <view class="use-three2-12">
              红包
            </view>
          </view>
          <view class="use-three2-2">
            283.00
          </view>
        </view>
      </view>
    </view>
    <!-- 我的订单 -->
    <view class="form">
      <view class="form1">
        我的订单
      </view>
      <view class="form2">
        <view class="form2-1">
          <image src="/static/icon_buy.png" alt=""></image>
          <view class="form2-2">
            商品订单
          </view>
        </view>
        <view class="form2-1"  @click="fw()">
          <image src="/static/订单.png" alt=""></image>
          <view class="form2-2">
            服务订单
          </view>
        </view>
        <view class="form2-1" @click="aftermarket()">
          <image src="/static/售后.png" alt=""></image>
          <view class="form2-2">
            退换/售后
          </view>
        </view>

      </view>
    </view>
    <!-- 签到送红包 -->
    <view class="sign">
      <view class="sign-top">
        <view class="sign-top1">
          签到送红包
        </view>
        <view>
          <uv-popup ref="popup" mode="center" @change="change" closeable="true">
            <view style="width: 500rpx;height:600rpx;" class="popup">
              <image src="/static/签到成功.png" alt=""></image>
              <view class="sign-size">恭喜您，签到成功</view>
              <view class="sign-size1">获得2红包</view>
              <button class="but1">立即使用</button>
              <button class="but2">确定</button>
            </view>
        		</uv-popup>
        </view>
        <button @click="open">立即签到</button>
      </view>
      <view class="sign-two">
        <uv-grid :col="7">
          <uv-grid-item v-for="(item,index) in baseList" :key="index">
            <text class="grid-text">{{item.title}}</text>
            <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="30"></uv-icon>
          </uv-grid-item>
        </uv-grid>
      </view>
      <view class="sign-bu"></view>
      <!-- 去浏览 -->
      <view class="sign-three">
        <view class="sign-three1">
          <view class="sign-three1-1">
            浏览商品列表15秒(1/5)
            <view class="sign-three1-2">+5红包</view>
          </view>
          <button>去浏览</button>
        </view>
        <view class="sign-three1">
          <view class="sign-three1-1">
            充值领取红包
            <view class="sign-three1-2">+5红包</view>
          </view>
          <button>去充值</button>
        </view>
        <view class="sign-three1">
          <view class="sign-three1-1">
            购物领取红包
            <view class="sign-three1-2">+5红包</view>
          </view>
          <button>去购买</button>
        </view>
      </view>
    </view>
    <!-- 收货地址 -->
    <view class="goods">
      <uv-grid :col="4">
        <uv-grid-item v-for="(item,index) in goodList" :key="index" @click="click(item.url)">
          <uv-icon :customStyle="{paddingTop:50+'rpx'}" :name="item.name" :size="35"></uv-icon>
          <text class="grid1-text">{{item.title}}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        baseList: [{
          name: '/static/红包1.png',
          title: '第1天'
        }, {
          name: '/static/红包1.png',
          title: '第2天'
        }, {
          name: '/static/红包1.png',
          title: '第3天'
        }, {
          name: '/static/红包1.png',
          title: '第4天'
        }, {
          name: '/static/红包1.png',
          title: '第5天'
        }, {
          name: '/static/红包1.png',
          title: '第6天'
        }, {
          name: '/static/红包1.png',
          title: '第7天'
        }],
        goodList: [{
          name: '/static/收货.png',
          title: '收货地址',
          url:'/pages/add/add'
        }, {
          name: '/static/商家入驻.png',
          title: '商家入驻',
          url:'/pages/Merchantru/Merchantru'
        }, {
          name: '/static/超级会员.png',
          title: '超级会员',
          url:'/pages/Surpervip/Surpervip'
        }, {
          name: '/static/二手交易.png',
          title: '二手交易商',
          url:'/pages/Secondgoods/Secondgoods'
        }, {
          name: '/static/官方客服.png',
          title: '官方客服'
        }, {
          name: '/static/合伙人.png',
          title: '城市合伙人'
        }, {
          name: '/static/成为代理.png',
          title: '成为代理',
          url:'/pages/Agentapply/Agentapply'
        }, {
          name: '/static/邀请好友.png',
          title: '邀请好友'
        }, {
          name: '/static/设置.png',
          title: '设置',
          url:'/pages/Setup/Setup'
        }, {
          name: '/static/新手指南.png',
          title: '新手指南',
          url:'/pages/novice1/novice1'
        }]
      }
    },
    methods: {
      // 跳转到售后订单
      aftermarket(){
        uni.navigateTo({
          url:'/pages/aftermarket/aftermarket'
        })
      },
      // 跳转关注页面
      gz(){
        uni.navigateTo({
          url:'/pages/guanzhud/guanzhud'
        })
      },
      // 跳转服务订单页面
      fw(){
        uni.navigateTo({
          url:'/pages/fuwudingdan/fuwudingdan'
        })
      },
      // 跳转红包页面
      hb(){
        uni.navigateTo({
          url:'/pages/hongbao/hongbao'
        })
      },
      // 跳转个人信息
      ge(){
        uni.navigateTo({
          url:'/pages/geren/geren'
        })
      },
      // 我的收藏
      collect() {
        uni.navigateTo({
          url: '/pages/collection/collection'
        });
      },
      balan() {
        uni.navigateTo({
          url: '/pages/mybalance/mybalance'
        })
      },
      open() {
        this.$refs.popup.open();
      },
      change(e) {
        console.log('弹窗状态改变：', e);
      },
      click(url){
        uni.navigateTo({
          url: url
        })
      }
    }
  }
</script>

<style lang="scss">
 page{
  background-color: #f5f5f5;

 }
  .box {
    width: 100%;
    margin: auto;
  }

  .use-bg {
    width: 100%;
    height: 560rpx;
    background: linear-gradient(to right, #faeaeb, #fef4f0, );

    // 名称
    .use-top {
      padding-top: 160rpx;
      padding-left: 50rpx;
      display: flex;

      image {
        width: 16%;
        height: 100rpx;
      }

      .use-top1 {
        margin-top: 20rpx;
        margin-left: 25rpx;
        font-size: 35rpx;
        font-weight: bold;
        color: #333232;

        .sue-top1-1 {
          margin-top: 15rpx;
          font-size: 25rpx;
          color: #beb8b8;
        }
      }
    }

    // 收藏
    .use-two {
      display: flex;
      margin-top: 40rpx;
      justify-content: space-evenly;

      .use-two1 {
        width: 18%;

        image {
          width: 100%;
          height: 180rpx;
        }
      }

      .use-two2 {
        width: 20%;

        image {
          width: 100%;
          height: 180rpx;
        }
      }
    }

    // 余额
    .use-three {
      width: 90%;
      margin: auto;
      margin-top: 20rpx;
      height: 180rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      display: flex;

      .use-three1 {
        width: 50%;
        margin-top: 50rpx;
        text-align: center;

        .use-three1-1 {
          width: 100%;
          margin-left: 110rpx;
          display: flex;

          .use-three1-11 {
            width: 12%;

            image {
              width: 100%;
              height: 40rpx;
            }
          }

          .use-three1-12 {
            font-size: 29rpx;
            color: #5f5f5f;
          }
        }

        .use-three1-2 {
          font-size: 35rpx;
          font-weight: bold;
        }
      }

      .use-three2 {
        width: 50%;
        margin-top: 50rpx;
        text-align: center;

        .use-three2-1 {
          width: 100%;
          margin-left: 110rpx;
          display: flex;

          .use-three2-11 {
            width: 13%;

            image {
              width: 100%;
              height: 44rpx;
            }
          }

          .use-three2-12 {
            font-size: 29rpx;
            color: #5f5f5f;
          }
        }

        .use-three2-2 {
          font-size: 35rpx;
          font-weight: bold;
        }
      }
    }
  }

  // 我的订单
  .form {
    width: 90%;
    height: 260rpx;
    margin: auto;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 160rpx;

    .form1 {
      width: 90%;
      height: 60rpx;
      margin: auto;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-bottom: 1px solid #e7e7e7;
      font-size: 32rpx;
      font-weight: bold;
      letter-spacing: 3rpx;
    }

    .form2 {
      width: 100%;
      margin-top: 40rpx;
      display: flex;

      .form2-1 {
        width: 33%;
        text-align: center;

        image {
          width: 25%;
          height: 60rpx;
        }

        .form2-2 {
          font-size: 25rpx;
          font-weight: bold;
          color: #5e5e5e;
        }
      }
    }
  }

  // 签到
  .sign {
    width: 90%;
    margin: auto;
    margin-top: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .sign-top {
      width: 90%;
      margin: auto;
      margin-top: 25rpx;
      border-bottom: 1px solid #e7e7e7;
      display: flex;

      .sign-top1 {
        margin-top: 30rpx;
        font-size: 33rpx;
        font-weight: bold;
        letter-spacing: 3rpx;
        margin-bottom: 50rpx;
      }

      button {
        width: 25%;
        height: 60rpx;
        margin-right: 0rpx;
        margin-top: 30rpx;
        font-size: 24rpx;
        text-align: center;
        border-radius: 30rpx;
        background-color: #fc4323;
        color: #fff;
      }
    }

    .sign-two {
      width: 90%;
      margin: auto;
      color: #9e9e9e;
      font-size: 26rpx;
      margin-top: 30rpx;
    }

    .sign-bu {
      width: 90%;
      margin: auto;
      border-bottom: 1px solid #e7e7e7;
      margin-top: 30rpx;
    }

    // 浏览
    .sign-three {
      width: 90%;
      margin: auto;
      padding-bottom: 10rpx;

      .sign-three1 {
        width: 100%;
        height: 150rpx;
        display: flex;
        margin-top: 25rpx;
        border-radius: 20rpx;
        background-color: #fafafa;
        margin-bottom: 25rpx;

        button {
          width: 25%;
          margin-top: 30rpx;
          margin-right: 30rpx;
          height: 80rpx;
          border: 2px solid #fb5b3f;
          border-radius: 40rpx;
          text-align: center;
          font-size: 29rpx;
          background-color: #fafafa;
          color: #fb4323;
        }

        .sign-three1-1 {
          margin: 30rpx 40rpx;
          font-size: 33rpx;

          .sign-three1-2 {
            font-size: 30rpx;
            color: #fb4728;
          }
        }
      }
    }

    // 立即签到
    .popup {
      image {
        width: 60%;
        margin-top: 70rpx;
        margin-left: 100rpx;
      }

      .sign-size {
        text-align: center;
      }

      .sign-size1 {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: #fc6c52;
        text-align: center;
      }

      .but1 {
        width: 40%;
        height: 80rpx;
        font-size: 30rpx;
        border-radius: 40rpx;
        margin-top: 50rpx;
        margin-left: 50rpx;
      }

      .but2 {
        width: 40%;
        height: 80rpx;
        font-size: 30rpx;
        border-radius: 40rpx;
        margin-top: -78rpx;
        margin-left: 260rpx;
        background-color: #fff;
        color: #fc4424;
        border: 1px solid #fc4424;
      }
    }
  }

  //收货地址
  .goods {
    width: 90%;
    height: 510rpx;
    margin: auto;
    margin-top: 30rpx;
    margin-bottom: 50rpx;
    border-radius: 20rpx;
    background-color: #ffffff;

    .grid1-text {
      font-size: 14px;
      color: black;
    }
  }
</style>
